﻿@{
    ViewData["Title"] = "Home Page";
}

<form enctype="multipart/form-data" id="formData">
    <input type="file" name="file" />
    <input type="button" id="submit" value="上传" />
</form>

<progress value="0" max="100" id="progress" style="height: 20px; width: 100%"></progress>
    <br />
    <!--div模拟进度条-->
    <div id="progressNumber" style="width: 0%; height: 20px; background-color: Red"></div>
    <br />
    <div id="result"></div>

<script type="text/javascript">
    
    function upFiles() {
        var form = document.getElementById("formData");
        var formData = new FormData(form);
          var xhr = new XMLHttpRequest();
            var url = "/Files/Upload";
            //FormData对象    
            formData.append("acttime",new Date().toString());    //本人喜欢在参数中添加时间戳，防止缓存（--、）          
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    document.getElementById("result").innerHTML = result;
                }
            }
            //进度条部分
            xhr.upload.onprogress = function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    document.getElementById('progress').value = percentComplete;
                    document.getElementById('progressNumber').style.width = percentComplete + "%";
                }
            };
            xhr.open("POST", url, true);
            xhr.send(formData);
    }

    window.onload = function() {
        document.getElementById("submit").onclick = upFiles ;
    }
</script>